<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片预加载之有序加载</title>
    <style>

        a {
            text-decoration: none;
        }

        .box {
            text-align: center;
        }

        .btn {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border: 1px solid #CCC;
            background-color: #FFF;
            padding: 0 10px;
            margin-right: 50px;
            color: #333;
        }

        .btn:hover {
            background-color: #EEE;
        }

    </style>
</head>
<body>

<div class="box">
    <img src="http://img1.cdn.u17i.com/17/04/140651/wp/17689666_1493287776_nNY6Hx3kzGRj.9f5fe_50.jpg" alt="pic" id="img"
         width="1200">
    <p>
        <a href="javascript:;" class="btn" data-control="prev">上一页</a>
        <a href="javascript:;" class="btn" data-control="next">下一页</a>
    </p>
</div>

<script src="js/jquery-3.2.1.js"></script>
<script src="js/preload.js"></script>
<script>
    //    var imgs = [
    //        'http://img1.cdn.u17i.com/17/04/140651/wp/17689666_1493287776_nNY6Hx3kzGRj.9f5fe_50.jpg',
    //        'http://img1.cdn.u17i.com/17/04/140651/wp/17689666_1493287776_9We7DZwZUZRe.84afa_50.jpg',
    //        'http://img1.cdn.u17i.com/17/04/140651/wp/17689666_1493287778_F0dF2D7tDZEz.473f4_50.jpg',
    //        'http://img1.cdn.u17i.com/17/04/140651/wp/17689666_1493287778_F0dF2D7tDZEz.473f4_50.jpg',
    //        'http://img1.cdn.u17i.com/17/04/140651/wp/17689666_1493287778_F0dF2D7tDZEz.473f4_50.jpg',
    //        'http://img1.cdn.u17i.com/17/04/140651/wp/17689666_1493287778_xaAv6Ss5asUC.dd687_50.jpg',
    //        'http://img1.cdn.u17i.com/17/05/140651/wp/17689666_1493903836_FpYPJqaa7f11.bad1c_50.jpg',
    //        'http://img1.cdn.u17i.com/17/05/140651/wp/17689666_1493902530_Nrl77p41rV4n.177cb_50.jpg'
    //    ];
    //    var len = imgs.length,
    //        count = 0,
    //        index = 0;
    //
    //    load();
    //
    //    //有序预加载
    //    function load(){
    //        var imgObj = new Image();
    //
    //        $(imgObj).on('load error', function(){
    //
    //            if(count >= len){
    //                //所有图片已经加载wanbi
    //
    //            }else {
    //                load();
    //            }
    //            count++;
    //        });
    //        imgObj.src = imgs[count];
    //    }
    //
    //    $('.btn').on('click', function () {
    //        if ($(this).data('control') === 'prev') {//上一张
    //            index = Math.max(0, --index)
    //        } else {//下一张
    //            index = Math.min(len - 1, ++index);
    //        }
    //        document.title = (index + 1) + '/' + len;
    //        $('#img').attr('src', imgs[index]);
    //    });

    var imgs = [
        'http://img1.cdn.u17i.com/17/04/140651/wp/17689666_1493287776_nNY6Hx3kzGRj.9f5fe_50.jpg',
        'http://img1.cdn.u17i.com/17/04/140651/wp/17689666_1493287776_9We7DZwZUZRe.84afa_50.jpg',
        'http://img1.cdn.u17i.com/17/04/140651/wp/17689666_1493287778_F0dF2D7tDZEz.473f4_50.jpg',
        'http://img1.cdn.u17i.com/17/04/140651/wp/17689666_1493287778_F0dF2D7tDZEz.473f4_50.jpg',
        'http://img1.cdn.u17i.com/17/04/140651/wp/17689666_1493287778_F0dF2D7tDZEz.473f4_50.jpg',
        'http://img1.cdn.u17i.com/17/04/140651/wp/17689666_1493287778_xaAv6Ss5asUC.dd687_50.jpg',
        'http://img1.cdn.u17i.com/17/05/140651/wp/17689666_1493903836_FpYPJqaa7f11.bad1c_50.jpg',
        'http://img1.cdn.u17i.com/17/05/140651/wp/17689666_1493902530_Nrl77p41rV4n.177cb_50.jpg'
    ];
    var len = imgs.length,
        index = 0;

    $.preload(imgs, {
        order: 'ordered'
    });

    $('.btn').on('click', function () {
        if ($(this).data('control') === 'prev') {//上一张
            index = Math.max(0, --index)
        } else {//下一张
            index = Math.min(len - 1, ++index);
        }
        document.title = (index + 1) + '/' + len;
        $('#img').attr('src', imgs[index]);
    });
</script>
</body>
</html>